{extend name="layout/main" /}

{block name="style"}
<style>
    .detail-container {
        max-width: 800px;
        margin: 0 auto;
    }
    
    .detail-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        overflow: hidden;
        margin-bottom: 20px;
    }
    
    .detail-header {
        background: #f8f9fa;
        padding: 20px;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .detail-title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #2c3e50;
    }
    
    .detail-body {
        padding: 30px;
    }
    
    .detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .detail-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 6px;
        border-left: 4px solid #3498db;
    }
    
    .detail-label {
        font-weight: 600;
        color: #666;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .detail-value {
        color: #333;
        font-size: 15px;
        word-break: break-all;
        line-height: 1.5;
    }
    
    .action-badge {
        padding: 6px 12px;
        border-radius: 15px;
        font-size: 14px;
        font-weight: 500;
        display: inline-block;
        color: white;
    }
    
    .action-login { background: #3498db; }
    .action-add { background: #27ae60; }
    .action-edit { background: #f39c12; }
    .action-delete { background: #e74c3c; }
    .action-status { background: #9b59b6; }
    .action-approve { background: #27ae60; }
    .action-reject { background: #e74c3c; }
    .action-clear { background: #95a5a6; }
    .action-default { background: #34495e; }
    
    .description-box {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 20px;
        margin-top: 10px;
        font-family: 'Courier New', monospace;
        font-size: 14px;
        line-height: 1.6;
        color: #2c3e50;
    }
    
    .user-agent-box {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 15px;
        margin-top: 10px;
        font-size: 12px;
        color: #666;
        word-break: break-all;
    }
    
    .back-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: #95a5a6;
        color: white;
        text-decoration: none;
        border-radius: 6px;
        font-size: 14px;
        transition: background 0.3s;
    }
    
    .back-button:hover {
        background: #7f8c8d;
        color: white;
    }
    
    .timeline-item {
        position: relative;
        padding-left: 30px;
        margin-bottom: 20px;
    }
    
    .timeline-item::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 8px;
        width: 8px;
        height: 8px;
        background: #3498db;
        border-radius: 50%;
    }
    
    .timeline-item::after {
        content: '';
        position: absolute;
        left: 11px;
        top: 16px;
        width: 2px;
        height: calc(100% - 8px);
        background: #e9ecef;
    }
    
    .timeline-item:last-child::after {
        display: none;
    }
    
    @media (max-width: 768px) {
        .detail-container {
            margin: 0 10px;
        }
        
        .detail-grid {
            grid-template-columns: 1fr;
        }
        
        .detail-header {
            flex-direction: column;
            gap: 15px;
            align-items: stretch;
        }
    }
</style>
{/block}

{block name="breadcrumb"}
<span class="breadcrumb-item">首页</span>
<span class="breadcrumb-item"><a href="/admin/log">操作日志</a></span>
<span class="breadcrumb-item active">日志详情</span>
{/block}

{block name="content"}
<div class="detail-container">
    <!-- 基本信息 -->
    <div class="detail-card">
        <div class="detail-header">
            <h3 class="detail-title">日志详情 #{$log.id}</h3>
            <a href="/admin/log" class="back-button">
                ← 返回列表
            </a>
        </div>
        
        <div class="detail-body">
            <div class="detail-grid">
                <div class="detail-item">
                    <div class="detail-label">日志ID</div>
                    <div class="detail-value">{$log.id}</div>
                </div>
                
                <div class="detail-item">
                    <div class="detail-label">操作类型</div>
                    <div class="detail-value">
                        {php}
                            $actionMap = [
                                'login' => '管理员登录',
                                'add_admin' => '添加管理员',
                                'edit_admin' => '编辑管理员',
                                'delete_admin' => '删除管理员',
                                'change_admin_status' => '修改管理员状态',
                                'approve_merchant' => '审核通过商户',
                                'reject_merchant' => '审核拒绝商户',
                                'delete_merchant' => '删除商户',
                                'clear_log' => '清理日志',
                            ];
                            $actionText = isset($actionMap[$log['action']]) ? $actionMap[$log['action']] : $log['action'];
                            $actionClass = 'action-default';
                            if (strpos($log['action'], 'login') !== false) $actionClass = 'action-login';
                            elseif (strpos($log['action'], 'add') !== false) $actionClass = 'action-add';
                            elseif (strpos($log['action'], 'edit') !== false) $actionClass = 'action-edit';
                            elseif (strpos($log['action'], 'delete') !== false) $actionClass = 'action-delete';
                            elseif (strpos($log['action'], 'status') !== false) $actionClass = 'action-status';
                            elseif (strpos($log['action'], 'approve') !== false) $actionClass = 'action-approve';
                            elseif (strpos($log['action'], 'reject') !== false) $actionClass = 'action-reject';
                            elseif (strpos($log['action'], 'clear') !== false) $actionClass = 'action-clear';
                        {/php}
                        <span class="action-badge {$actionClass}">{$actionText}</span>
                    </div>
                </div>
                
                <div class="detail-item">
                    <div class="detail-label">操作人员</div>
                    <div class="detail-value">
                        {$log.admin_name}
                        {if !empty($log.admin_id)}
                        <small style="color: #666;">(ID: {$log.admin_id})</small>
                        {/if}
                    </div>
                </div>
                
                <div class="detail-item">
                    <div class="detail-label">操作时间</div>
                    <div class="detail-value">{$log.create_time|date='Y-m-d H:i:s'}</div>
                </div>
                
                <div class="detail-item">
                    <div class="detail-label">IP地址</div>
                    <div class="detail-value">{$log.ip|default='--'}</div>
                </div>
                
                <div class="detail-item">
                    <div class="detail-label">目标ID</div>
                    <div class="detail-value">
                        {if !empty($log.target_id)}
                            {$log.target_id}
                        {else}
                            --
                        {/if}
                    </div>
                </div>
            </div>
            
            <!-- 操作描述 -->
            <div class="detail-item" style="grid-column: 1 / -1;">
                <div class="detail-label">操作描述</div>
                <div class="detail-value">
                    <div class="description-box">
                        {$log.description|default='无描述信息'}
                    </div>
                </div>
            </div>
            
            <!-- 用户代理信息 -->
            {if !empty($log.user_agent)}
            <div class="detail-item" style="grid-column: 1 / -1; margin-top: 20px;">
                <div class="detail-label">浏览器信息</div>
                <div class="detail-value">
                    <div class="user-agent-box">
                        {$log.user_agent}
                    </div>
                </div>
            </div>
            {/if}
        </div>
    </div>
    
    <!-- 相关操作时间线 -->
    {if !empty($related_logs)}
    <div class="detail-card">
        <div class="detail-header">
            <h3 class="detail-title">相关操作记录</h3>
        </div>
        <div class="detail-body">
            {volist name="related_logs" id="related"}
            <div class="timeline-item">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;">
                    <strong>{$related.description}</strong>
                    <small style="color: #666;">{$related.create_time|date='Y-m-d H:i:s'}</small>
                </div>
                <div style="color: #666; font-size: 14px;">
                    操作人：{$related.admin_name} | IP：{$related.ip}
                </div>
            </div>
            {/volist}
        </div>
    </div>
    {/if}
</div>
{/block}

{block name="script"}
    // 页面加载完成后的初始化
    document.addEventListener('DOMContentLoaded', function() {
        console.log('日志详情页面加载完成');
    });
{/block}
